<template>
  <div>
    <div id="pie2Chart2"
         ref="pie2Chart2" />
  </div>
</template>

<script>
import Echarts from 'echarts'

export default {
  components: {},
  props: {},
  data () {
    return {
      option: {
        backgroundColor: '#2c343c',
        title: {
          text: '饼图练习',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        graphic: [{
          type: 'image',
          id: 'logo',
          right: '44%',
          top: '40%',
          z: -10,
          bounding: 'raw',
          origin: [75, 75],
          style: {
            image: 'http://echarts.baidu.com/images/favicon.png',
            width: 150,
            height: 150,
            opacity: 0.4
          }
        }, {
          type: 'text',
          left: '75.5%',
          top: '48%',
          style: {
            text: '空心饼图',
            fill: '#fff',
            font: 'normal 24px "Microsoft YaHei", sans-serif'
          }
        }],
        series: [{
          name: '饼图',
          type: 'pie',
          radius: '55%',
          center: ['20%', '50%'],
          color: [
            '#00acee',
            '#52cdd5',
            '#79d9f1',
            '#a7e7ff',
            '#c8efff'
          ],
          data: [{
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 235,
            name: '视频广告'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
          ],
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: '#fff'
              },
              smooth: 0.2,
              length: 15,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200
          }
        }, {
          name: '空心饼图',
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['80%', '50%'],
          color: [
            '#00acee',
            '#52cdd5',
            '#79d9f1',
            '#a7e7ff',
            '#c8efff'
          ],
          data: [{
            value: 335,
            name: '直接访问'
          },
          {
            value: 310,
            name: '邮件营销'
          },
          {
            value: 274,
            name: '联盟广告'
          },
          {
            value: 235,
            name: '视频广告'
          },
          {
            value: 400,
            name: '搜索引擎'
          }
          ],
          label: {
            normal: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          labelLine: {
            normal: {
              lineStyle: {
                color: '#fff'
              },
              smooth: 0.2,
              length: 15,
              length2: 20
            }
          },
          itemStyle: {
            normal: {
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200
          }
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  methods: {
    setEcharts () {
      const dom = this.$refs.pie2Chart2
      Echarts.dispose(dom)
      this.myEcharts = Echarts.init(dom)
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#pie2Chart2 {
  margin: 0 auto;
  width: 160vh;
  height: 80vh;
}
</style>
